<template>
  <view class="container">
    <view class="recommendList" v-for="item in recommendList">
      <view class="recommend-item">
        <view class="poster-box">
          <view class="image">
            <image :src="item.posterUrl"></image>
           </view>
        </view>
        <view class="info-box">
            <view class="bold-text">
              {{item.info}}
            </view>
            <view class="topic">
             {{item.topic}}
            </view>
            <view class="date">
             {{item.date}}
            </view>
            <view class="address">
             {{item.addressCity}}<view class="icon">|</view>{{item.area}}
            </view>
            <view class="state-tag">
              <uni-tag :inverted="true"  :circle="true"  size="normal" text="待 开 售" type="error" />
            </view>
            <view class="price">
              ￥{{item.price}}
              <view class="start">
                起
              </view>
            </view>
        </view>
      </view>




    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        recommendList:[
          {
            id:1,
            info:'广州 | 2024周震南Love&Desire演唱会-广州',
            posterUrl:'https://img0.tking.cn/mtl/default/img/FBQbJddxAx_.png',
            topic:'周震南',
            date:'2024.01.14 周日 19:30 ',
            addressCity:'广州',
            area:'广州体育馆1号馆',
            price:270
          },
          {
            id:2,
            posterUrl:'https://img0.tking.cn/mtl/default/img/FiAyet7fTc_.png',
            info:'广州 | 陈小春/陈洁仪/方书剑/导演：何念 音乐剧《雄狮少年》国语版',
            topic:'周震南',
            date:'2024.01.14 周日 19:30 ',
            addressCity:'广州',
            area:'广州体育馆1号馆',
            price:340
          },
          {
            id:3,
            posterUrl:'https://img0.moretickets.com/zbf/assets/img/aaWabmtnWS_.png',
            info:'广州 | 天空之城—久石让·宫崎骏动漫视听轻音乐之旅钢琴音乐会',
            topic:'宫崎骏',
            date:'2024.01.20 周六 14:30 ',
            addressCity:'广州',
            area:'广州云慕剧场',
            price:150
          },
          {
            id:4,
            posterUrl:'https://weeklyreport.moretickets.com/my_file/acc76411-d242-4048-a328-355ffed44f51.jpg',
            info:'福州 | 开心麻花反转爆笑大戏《窗前不止明月光》',
            topic:'开心麻花',
            date:'2024.01.20 周六 14:30 ',
            addressCity:'福州',
            area:'福建大剧院-歌剧厅',
            price:170
          }
          ,{
            id:5,
            posterUrl:'https://img0.tking.cn/mtl/default/img/FiAyet7fTc_.png',
            info:'广州 | 2024周震南Love&Desire演唱会-广州',
            topic:'周震南',
            date:'2024.01.14 周日 19:30 ',
            addressCity:'广州',
            area:'广州体育馆1号馆',
            price:270
          },
         {
           id:6,
           posterUrl:'https://img0.moretickets.com/zbf/assets/img/aaWabmtnWS_.png',
           info:'广州 | 天空之城—久石让·宫崎骏动漫视听轻音乐之旅钢琴音乐会',
           topic:'宫崎骏',
           date:'2024.01.20 周六 14:30 ',
           addressCity:'广州',
           area:'广州云慕剧场',
           price:150
         },
          {
            id:7,
            posterUrl:'https://img0.tking.cn/mtl/default/img/FBQbJddxAx_.png',
            info:'广州 | 2024周震南Love&Desire演唱会-广州',
            topic:'周震南',
            date:'2024.01.14 周日 19:30 ',
            addressCity:'广州',
            area:'广州体育馆1号馆',
            price:295
          },
          {
            id:8,
            posterUrl:'https://weeklyreport.moretickets.com/my_file/acc76411-d242-4048-a328-355ffed44f51.jpg',
            info:'广州 | 2024周震南Love&Desire演唱会-广州',
            topic:'周震南',
            date:'2024.01.14 周日 19:30 ',
            addressCity:'广州',
            area:'广州体育馆1号馆',
            price:170
          }
        ]
      };
    }
  }
</script>

<style lang="scss">
   .recommendList{
      margin-top: 10px;
     .recommend-item{
      position: relative;
      margin-top: 10px;
      height: 350rpx;
      border-top: none;
      box-shadow: 2px 2px 2px #f0e5e6;
      border-radius:10px;
      padding: 10px 10px;
     }
     .poster-box{
       position: absolute;
       width: 35%;
       .image{
         width: 100%;
         height: 330rpx;
         border-radius: 5px;
         overflow: hidden;
         image{
           width: 100%;
           height: 100%;
         }
       }
     }
     .info-box{
       position: absolute;
       top: 5px;
       right: 12px;
       width: 58%;
       // background-color:white;
       .bold-text{
         font-weight: 600;
         font-family: 'fangsong';
         font-size: 19px;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         -moz-box-orient:vertical;
         text-overflow: ellipsis;
         overflow: hidden;
         word-break: break-all;
         word-wrap: break-word;
       }
       .topic{
         margin-top: 20px;
         color: #ff7627;
         font-size: 16px;
       }
       .date{
         margin-top: 5px;
         color: #504f4c;
         font-size: 16px;
       }
       .address{
         display: flex;
         justify-content:start;
         letter-spacing: 2rpx;
         margin-top: 5px;
         color: #504f4c;
         font-size: 16px;
         .icon{
            color: #ceccc5;
            font-size: 14px;
         }
       }
       .state-tag{
         margin-top: 6px;
       }
       .price{
         display: flex;
         justify-content: start;
         position: absolute;
         bottom: -5px;
         right: 0px;
         font-size: 26px;
         color: #d4237a;
         .start{
          margin-top: 7px;
          margin-left: 3px;
          font-size: 18px;
          color: #4b4a47;
         }
       }
     }
   }
</style>
